<template>
	<view>
		<view class="container">
			<view class="title">
				其他信息
			</view>
			<view class="way-box" >
				<view :class="active == 3 ? 'active' : ''" @click="onActive(3)">
					自行解决
				</view>
				<view :class="active == 2 ? 'active' : ''" @click="onActive(2)">
					桌餐
				</view>
				<view :class="active == 1 ? 'active' : ''" @click="onActive(1)">
					自助餐
				</view>
			</view>
			
			<view class="title">
				桌餐说明
			</view>
			
			<view class="shuoming-box">
				<!-- <view class="miaoshu">
					选择桌餐是一种发货法律和速，度快了哈弗卡尔阿斯顿asdasdasd阿达阿达阿萨德啊发生电视
				</view>
				<view class="type">
					<text>早餐:</text>
					<text>鸡蛋，牛奶，面包...</text>
				</view>
				<view class="type">
					<text>午餐:</text>
					<text>鸡蛋，牛奶，面包...</text>
				</view>
				<view class="type">
					<text>晚餐:</text>
					<text>鸡蛋，牛奶，面包...</text>
				</view> -->
				<view class="miaoshu" v-html="zhuoCanInfo.remark" >
					
				</view>
				<view class="pics" v-if="zhuoCanInfo.img.length != 0">
					<image v-for=" (item, index) in zhuoCanInfo.img.split(',') " :key="index" :src="item" mode=""></image>
				</view>
				
			</view>
			
			<view class="title">
				自助餐说明
			</view>
			
			<view class="shuoming-box">
				<!-- <view class="miaoshu1">
					自助餐是一种发货法律和速，度快了哈弗卡尔阿斯顿asdasdasd阿达阿达阿萨德啊发生电视
				</view>
				<view class="type">
					<text>第一道菜是噻安乐凯撒解放东路撒娇的方式到时看积分</text>
				</view>
				<view class="type">
					<text>第二道菜是噻安乐凯撒解放东路撒娇的方式到时看积分</text>
				</view>
				<view class="type">
					<text>第三道菜是噻安乐凯撒解放东路撒娇的方式到时看积分</text>
				</view> -->
				<view class="miaoshu" v-html="ziZhuInfo.remark" >
					
				</view>
				<view class="pics" v-if="ziZhuInfo.img.length != 0">
					<image v-for=" (item, index) in ziZhuInfo.img.split(',') " :key="index" :src="item" mode=""></image>
				</view>
				
			</view>
			
		</view>
		<view class="footer">
			<view class="btn-box">
				<view class="btn-l">
					<text>￥</text>
					<text>500</text>
					<text>/天</text>
				</view>
				<view class="btn-r" @click="goCanYinYdSuc">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { request } from '../../static/utils/api.js'
	export default {
		data() {
			return {
				// 餐饮类型激活态  1 自助餐  2桌餐 3自行解决
				active: 2,
		
				// 餐饮说明  桌餐
				zhuoCanInfo: {
					img: []
				},
				// 自助餐说明
				ziZhuInfo: {
					img: []
				}
			}
		},
		onLoad() {
			request({
				url: 'api/fanFoodOrder/stuFoodInfo',
				method: 'post',
				data: {
					userId: '16e677470fe24e3c89391db8ba8a2f34',
					layId: '5aba829e980f48b6bd28ba1ac97320b0',
					processId: '1f422e02c79f4e97aaf264d18d1b413a'
				}
			}).then(res => {
				console.log(res);
				this.canYinDetail = res.data.list
				// 初始化时  渲染桌餐
				res.data.list.filter(item => {
					if(item.type == 2) {
						// item.img = item.img.split[',']
						this.zhuoCanInfo = item
					} else if (item.type == 1) {
						// item.img = item.img.split[',']
						this.ziZhuInfo = item
					}
				})
			})
		},
		methods:{
			onActive(id) {
				console.log(id);
				this.active = id
			},
			// 点击预订按钮
			goCanYinYdSuc() {
				console.log(this.active);
				// uni.navigateTo({
				// 	url: '../house/canyinYdSuc'
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f7fb;
	}
	.container {
		padding: 0 30rpx 140rpx;
		.title {
			font-size: 36rpx;
			color: #333;
			margin: 30rpx 0;
		}
		.way-box {
			display: flex;
			justify-content: space-around;
			view {
				background-color: #fff;
				width: 30%;
				border-radius: 300px;
				padding: 20rpx 0;
				text-align: center;
				font-size: 32rpx;
				color: #666;
			}
			.active {
				background-color: #f0f4ff;
				color: #6684fc;
			}
		}
		.shuoming-box {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #666;
			.miaoshu {
				line-height: 46rpx;
				text-decoration: underline;
			}
			.miaoshu1 {
				line-height: 46rpx;
			}
			.type {
				padding: 6rpx 0;
				text:nth-of-type(1) {
					margin-right: 20rpx;
				}
			}
			.pics {
				display: flex;
				flex-wrap: wrap;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					margin-top: 20rpx;
				}
				image:nth-of-type(2) {
					margin: 20rpx 25rpx 0;
				}
			}
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		width: 100vw;
		
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		.btn-box {
			border-radius: 300rpx;
			overflow: hidden;
			display: flex;
			.btn-l {
				padding: 20rpx 0;
				flex: 1;
				background-color: #f0f4ff;
				text-align: center;
				color: #6684fc;
			}
			.btn-r {
				padding: 20rpx 0;
				flex: 1;
				background-color: #6684fc;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>
